<script setup>
import {useRoute, useRouter} from 'vue-router'
import {onMounted, ref, watch} from 'vue'
import {request} from "@/util/request.js";
import ZoomImage from "@/components/ZoomImage.vue";
import {useUserStore} from "@/store/user.js";
import {ElMessage} from 'element-plus'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const product = ref({
    productId: undefined,
    name: undefined,
    price: undefined,
    stock: undefined,
    unit: undefined,
    details: undefined,
    createdAt: undefined,
    defaultImage: {
        imageUrl: ''
    },
    imagesList: []
})
const previewUrl = ref('')
const cart = ref({
    quantity: 1
})

function getGoodsInfo() {
    request.get('/products/info/' + route.params.id).then(res => {
        product.value = res.data
        console.log(product.value)
        previewUrl.value = '/api' + product.value.defaultImage.imageUrl
    })
}

onMounted(() => {
    getGoodsInfo()
})

watch(() => route.params.id,
    (old, newVal) => {
        getGoodsInfo()
    }
)

function verifyLogin() {
    if (!userStore.token) {
        // 如果没有登录 跳转到登录页面
        ElMessage.error("请先登录");
        router.push("/login")
    }
}

function toCart() {
    verifyLogin()
    cart.value.productId = product.value.productId
    request.post('/cart/add', JSON.stringify(cart.value), {
        headers: {
            'token': userStore.token,
            "content-type": "application/json"
        }
    }).then(res => {
        if (res.code === 1) {
            ElMessage.success("添加成功")
            // TODO 去结算功能

        } else {
            ElMessage.error(res.msg)
        }
    })
}
</script>

<template>
    <el-row class="info">
        <el-col :span="8">
            <div class='preview_card' ref="card">
                <ZoomImage :url="previewUrl"/>
            </div>
            <el-row class="thumbnail">
                <el-col :span="4" v-for="image in product.imagesList" class="thumbnail_card">
                    <!--<div v-if=""></div>-->
                    <img :src="'/api' + image.imageUrl" alt=""/>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="14" :offset="2">
            <div class="info_content">
                <h2>{{ product.name }}</h2>
                <h3>{{ product.details }}</h3>
                <div class="product_price">
                    <div class="price_item">
                        <span>价 格：</span>
                        <span>{{ product.price }}</span>
                    </div>
                    <div class="price_item">
                        <span>库 存：</span>
                        <span>{{ product.stock }}</span>
                    </div>
                    <div class="price_item">
                        可以添加其他的优惠信息
                    </div>
                </div>
                <div class="other">
                    其他信息
                </div>
                <div class="product_number">
                    <span>购 买 数 量：</span>
                    <el-input-number v-model="cart.quantity" :min="1" @change="verifyLogin"/>
                    <el-button class="to_cart" @click="toCart" size="large" type="danger">加入购物车</el-button>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <h2>商品详细信息</h2>
        <div class="product_image">
            <img :src="'/api' + image.imageUrl" v-for="image in product.imagesList" :alt="product.name"/>
        </div>
    </el-row>
</template>

<style>
.info {
    height: 650px;
}

.preview_card {
    position: relative;
    width: 500px;
    height: 500px;
}

.thumbnail {
    height: 70px;
    justify-content: center;
}

.thumbnail_card img {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.product_price {
    width: 100%;
    height: 180px;
    background-color: #f3f3f3;
}

.price_item {
    padding: 10px;
    margin: 10px 0;
}

.product_number {
    margin: 10px 0;
}

.to_cart {
    margin-left: 20px;
}

.info_content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.other {
    height: 40%;
}

.product_image img {
    width: 100%;
}
</style>